import React, { Fragment, PureComponent } from 'react'
import { View, Text, StyleSheet, Animated } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import TabHeader from './TabHeader'
import CustomButton from '../../../../components/button/CustomButton'
import CustomImage from '../../../../components/image/CustomImage'
import { ONE_PIXEL } from '../../../../utils/ScreenUtil'

export default class TabFilter extends PureComponent {
  static propTypes = {
    filterArr: PropTypes.array,
    searchOpacity: PropTypes.object,
    filterItemClick: PropTypes.func,
    onTabItemClick: PropTypes.func,
    tabSearchClick: PropTypes.func,
    tabLabels: PropTypes.array
  }

  render() {
    const { filterArr, searchOpacity, filterItemClick, onTabItemClick, tabSearchClick, tabLabels } = this.props
    console.log(filterArr, tabLabels, 123)
    return (
      <Fragment>
        <View style={styles.tabHeaderView}>
          <TabHeader tabLabels={tabLabels} onItemClick={onTabItemClick} />
          <CustomButton style={styles.tabSearchBtn} onPress={tabSearchClick}>
            <Animated.Image
              style={[styles.tabSearchImg, { opacity: searchOpacity }]}
              source={require('src/imgC/home/search.png')} />
          </CustomButton>
        </View>
        <View style={styles.filterView}>
          {filterArr.map((item, index) => {
            return (
              <CustomButton style={styles.filterItemView} key={index} onPress={filterItemClick} params={index}>
                <Text style={[styles.filterText, item.isActive && styles.filterActiveText]}>{item.label}</Text>
                <CustomImage
                  style={styles.filterImage}
                  source={item.isActive ? require('src/imgC/home/jiantou_more_up.png') : require('src/imgC/home/jiantou_more_down.png')} />
              </CustomButton>
            )
          })}
        </View>
      </Fragment>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingBottom: ScaleS(23)
  },
  tabHeaderView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: 'white',
  },
  tabSearchBtn: {
    marginTop: ScaleS(36),
    marginRight: ScaleS(20)
  },
  tabSearchImg: {
    width: ScaleS(20),
    height: ScaleS(20)
  },
  filterView: {
    flexDirection: 'row',
    paddingHorizontal: ScaleS(20),
    height: ScaleS(52),
    alignItems: 'center',
    backgroundColor: 'white',
    justifyContent: 'space-between',
    borderBottomColor: 'rgba(120,120,120,0.2)',
    borderStyle: 'solid',
    borderBottomWidth: ONE_PIXEL
  },
  filterItemView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  filterText: {
    color: '#999999',
    fontSize: ScaleT(16),
    fontWeight: '500',
    marginRight: ScaleS(10)
  },
  filterActiveText: {
    color: '#444444'
  },
  filterImage: {
    width: ScaleS(5),
    height: ScaleS(4)
  },
  filterPositionView: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 2
  },
  filterBgView: {
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.7)'
  },
  filterContentView: {
    position: 'absolute',
    top: 0,
    width: '100%',
    zIndex: 3,
    borderBottomRightRadius: ScaleS(10),
    borderBottomLeftRadius: ScaleS(10),
    overflow: 'hidden',
    borderTopColor: '#F7F7F7',
    borderStyle: 'solid',
    borderTopWidth: ONE_PIXEL,
    paddingHorizontal: ScaleS(20),
    backgroundColor: 'white'
  }
})
